<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
    <!--导航  使用公共部分进行替换-->
    <!--  ~{ 模板名 :: 片段名} -->
    <div th:replace="~{common :: myheader}"></div>

    <h1>你好，<span th:text="${name}"></span></h1>
    <hr/>
    th:text： 替换标签体的内容； 会转义
    th:utext: 替换标签体的内容; 不会转义html标签，真正显示为html该有的样式
    <h1 th:text="${msg}">哈哈</h1>
    <h1 th:utext="${msg}">呵呵</h1>
    <hr/>
    转大写
    <h1 th:text="${#strings.toUpperCase(name)}"></h1>
    <h1 th:text="${'前缀：'+name+'后缀'}"></h1>
    拼串
    <h1 th:text="|前缀哈哈 ${name} 后缀呵呵|"></h1>

    <hr/>
    th:任意html属性； 动态替换任意属性的值
    <img th:src="@{${imgUrl}}" src="1.png" style="width:300px;"/>
    <br/>
    th:attr：任意属性指定
    <img src="1.png" style="width:300px;" th:attr="src=${imgUrl},style=${style}"/>
    <br/>
    th：其他指令
    <img th:src="@{${imgUrl}}" th:style="${style}" th:if="${show}">


    <br/>
    2.jpg  @{} 专门用来取各种路径
    <img  style="width:300px;" th:src="@{/3.png}">

</body>
</html>